<script lang="ts" setup>
import type {
  PageRequest,
  ProjectPageRequest,
  ProjectPageResponse,
  SysClientResponse,
} from '#/api/kingtown/types';

import { createVNode, h, onMounted, ref, unref } from 'vue';

import {
  BarsOutlined,
  CarryOutOutlined,
  DownloadOutlined,
  ExclamationCircleOutlined,
  PullRequestOutlined,
} from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';

import { listClientsApi, pageProjectApi } from '#/api/kingtown';

const dataSource = ref<ProjectPageResponse[]>([]);
const columns = ref([
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    width: 180,
    align: 'center',
  },
  {
    title: '所属客户',
    dataIndex: 'clientName',
    key: 'clientName',
    width: 140,
    align: 'center',
  },
  {
    title: '应盘',
    customRender: ({ record }) => {
      return record.qty?.total;
    },
    key: 'qty.total',
    width: 80,
    align: 'center',
  },
  {
    title: '已盘',
    customRender: ({ record }) => {
      return record.qty?.counted;
    },
    key: 'qty.counted',
    width: 80,
    align: 'center',
  },
  {
    title: '未盘',
    customRender: ({ record }) => {
      return record.qty?.uncounted;
    },
    key: 'qty.uncounted',
    width: 80,
    align: 'center',
  },
  {
    title: '新增',
    customRender: ({ record }) => {
      return record.qty?.added;
    },
    key: 'qty.added',
    width: 80,
    align: 'center',
  },
  {
    title: '盘点状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 140,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 205,
    align: 'center',
  },
]);

const clients = ref<SysClientResponse[]>([]);
const loading = ref<Boolean>(false);

const params = ref<ProjectPageRequest>({
  clientId: '',
  projectName: '',
  status: '',
});

const pageRequest = ref<PageRequest>({
  current: 0,
  size: 10,
  query: unref(params),
});

onMounted(() => {
  console.warn('onMounted');
  fetchClients();
  reload();
});

const handleDetail = (record) => {
  console.warn(record);
};
const handleComplete = (record: any) => {
  Modal.confirm({
    title: '完成盘点任务',
    icon: createVNode(ExclamationCircleOutlined),
    content:
      '完成盘点任务后该任务无法被用户选择盘点，但可以在平台查看盘点结果，请确认',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      }).catch(() => console.log('Oops errors!'));
    },
    onCancel() {},
  });
};
const handleSync = (record: any) => {
  Modal.confirm({
    title: '同步数据',
    icon: createVNode(ExclamationCircleOutlined),
    content: '请确认是否将该盘点任务中的已盘信息同步至基础数据表',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      }).catch(() => console.log('Oops errors!'));
    },
    onCancel() {},
  });
};
const handleExport = (record: any) => {
  console.warn('export');
};

const fetchData = async () => {
  loading.value = true;
  const result = await pageProjectApi(pageRequest.value);
  loading.value = false;
  dataSource.value = result.records;
  console.log('pageAssetApi', result);
};

const fetchClients = async () => {
  clients.value = await listClientsApi();
  if (clients.value.length > 0) {
    params.value.clientId = clients.value[0]?.id || '';
  }
};

const reload = async () => {
  pageRequest.value.current = 1;
  await fetchData();
};
</script>
<template>
  <div class="page-wrap">
    <div class="action-wrap">
      <a-space class="button-wrap">
        <a-button type="primary">新增</a-button>
      </a-space>
      <a-space class="search-wrap">
        <span>所属客户</span>
        <a-select v-model:value="params.clientId" style="width: 120px">
          <a-select-option value="">全部</a-select-option>
          <a-select-option
            v-for="client in clients"
            :value="client.id"
            :key="client.id"
          >
            {{ client.clientName }}
          </a-select-option>
        </a-select>
        <span>任务名称</span>
        <a-input style="width: 120px" v-model:value="params.projectName" />
        <span>任务状态</span>
        <a-select v-model:value="params.status" style="width: 135px">
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="0">未开始/进行中</a-select-option>
          <a-select-option value="1">已完成</a-select-option>
        </a-select>
        <a-button type="primary" @click="reload">搜索</a-button>
      </a-space>
    </div>
    <div class="content-wrap">
      <a-table :data-source="dataSource" :columns="columns">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column?.key === 'status'">
            <a-tag v-if="record.status === 0" color="orange">
              未开始/进行中
            </a-tag>
            <a-tag v-else color="blue">已完成</a-tag>
          </template>
          <template v-if="column?.key === 'operation'">
            <div>
              <!--              <a-space>-->
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(BarsOutlined)"
                @click="handleDetail(record)"
              >
                明细
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(CarryOutOutlined)"
                @click="handleComplete(record)"
              >
                完成
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(PullRequestOutlined)"
                @click="handleSync(record)"
              >
                同步
              </a-button>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(DownloadOutlined)"
                @click="handleExport(record)"
              >
                导出
              </a-button>
              <!--              </a-space>-->
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<style scoped></style>
